<script>
    import { modifyPassword } from '@/api/system'
    import { removeToken } from '@/utils/auth'
    import { redirect } from '@/utils/index'
    export default {
        data() {
            const regular = {
                password: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,32}$/,
            }
            const validatePass = (rule, value, callback) => {
                if (value && !regular.password.test(value)) {
                    return callback(new Error('密码格式输入有误'))
                } else {
                    callback()
                }
            }
            const validatePass2 = (rule, value, callback) => {
                if (value !== this.formData.newPassword) {
                    callback(new Error('两次输入密码不一致!'))
                } else {
                    callback()
                }
            }
            return {
                passwordType: 'password',
                newPasswordType: 'password',
                oldPasswordType: 'password',
                formData: {},
                rules: {
                    oldPassword: [{ required: true, message: '旧密码不能为空', trigger: 'blur' }],
                    newPassword: [
                        { required: true, message: '新密码不能为空', trigger: 'blur' },
                        {
                            pattern: /[a-z]/g,
                            message: '必须包含小写字母',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[A-Z]/g,
                            message: '必须包含大写字母',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[0-9]/g,
                            message: '必须包含数字',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[\W_!@#$%^&*`~()-+=]/g,
                            message: '必须包含特殊字符',
                            trigger: 'blur',
                        },
                        { min: 8, max: 16, message: '长度在 8 到 32 个字符', trigger: 'blur' },
                    ],
                    repeat: [
                        { required: true, message: '新密码不能为空', trigger: 'blur' },
                        {
                            pattern: /[a-z]/g,
                            message: '必须包含小写字母',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[A-Z]/g,
                            message: '必须包含大写字母',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[0-9]/g,
                            message: '必须包含数字',
                            trigger: 'blur',
                        },
                        {
                            pattern: /[\W_!@#$%^&*`~()-+=]/g,
                            message: '必须包含特殊字符',
                            trigger: 'blur',
                        },
                        { min: 8, max: 16, message: '长度在 8 到 32 个字符', trigger: 'blur' },
                        { validator: validatePass2, trigger: 'blur' },
                    ],
                },
            }
        },
        methods: {
            //保存
            onSave() {
                const { userId } = this.$store.state.userInfo || {}
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        modifyPassword({
                            password: this.formData.repeat,
                            oldPassword: this.formData.oldPassword,
                            id: userId,
                        }).then((result) => {
                            if (result && result.code == 200) {
                                this.$message({
                                    message: '保存成功',
                                    type: 'success',
                                })
                                removeToken()
                                setTimeout(() => {
                                    redirect()
                                }, 1000)
                            }
                        })
                    } else {
                        return false
                    }
                })
            },
            onCancel() {
                this.$router.go(-1)
            },
        },
    }
</script>
<template>
    <div class="reset-container">
        <div class="handle-box">
            <i />
            <Space>
                <el-button type="info" @click="onCancel">返回</el-button>
                <el-button type="primary" @click="onSave"> 保存 </el-button>
            </Space>
        </div>
        <el-form :model="formData" :rules="rules" class="reset-form" label-width="120px" ref="form">
            <el-form-item label="旧密码" prop="oldPassword">
                <el-input
                    v-model="formData.oldPassword"
                    :type="oldPasswordType"
                    placeholder="请输入旧密码"
                >
                    <template slot="suffix">
                        <span
                            @click="
                                () => {
                                    this.oldPasswordType =
                                        this.oldPasswordType === 'password' ? '' : 'password'
                                }
                            "
                        >
                            <svg-icon
                                :icon-class="oldPasswordType === 'password' ? 'eye' : 'eye-open'"
                            />
                        </span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPassword">
                <el-input
                    v-model="formData.newPassword"
                    :type="newPasswordType"
                    placeholder="8-16个字，包含数字、字母、特殊字符，区分大小写"
                >
                    <template slot="suffix">
                        <span
                            @click="
                                () => {
                                    this.newPasswordType =
                                        this.newPasswordType === 'password' ? '' : 'password'
                                }
                            "
                        >
                            <svg-icon
                                :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'"
                            />
                        </span>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="repeat">
                <el-input
                    v-model="formData.repeat"
                    :type="passwordType"
                    placeholder="请再次输入密码"
                >
                    <template slot="suffix">
                        <span
                            @click="
                                () => {
                                    this.passwordType =
                                        this.passwordType === 'password' ? '' : 'password'
                                }
                            "
                        >
                            <svg-icon
                                :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
                            />
                        </span>
                    </template>
                </el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<style lang="scss" scoped>
    .reset-container {
        height: 100%;
    }
    .reset-form {
        width: 600px;
        margin: 0 auto;
        padding-top: 70px;
    }
</style>
